<template>
	<view class="numberList">
		<view class="nl-item">
			<!-- state 1 未答题 2 错题 3 正确 -->
			<view class="item" :class="item.state == 2 ? 'wrong' : item.state == 3 ? 'correct' : ''" v-for="(item, index) in topicList" @click="onTopic(item, index)">
				{{ item.topic }}
			</view>
			<view class="occupy" v-for="(t, i) in [0, 1, 2, 3, 4, 5, 6]"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// <!-- state 1 未答题 2 错题 3 正确 -->
			topicList: [
				{ topic: '01', state: '1' },
				{ topic: '02', state: '2' },
				{ topic: '03', state: '3' },
				{ topic: '04', state: '1' },
				{ topic: '05', state: '2' },
				{ topic: '06', state: '1' },
				{ topic: '07', state: '1' },
				{ topic: '08', state: '1' },
				{ topic: '09', state: '1' },
				{ topic: '10', state: '1' },
				{ topic: '11', state: '2' },
				{ topic: '12', state: '3' },
				{ topic: '13', state: '1' },
				{ topic: '14', state: '2' },
				{ topic: '15', state: '3' },
				{ topic: '13', state: '3' },
				{ topic: '14', state: '2' },
				{ topic: '15', state: '3' },
				{ topic: '13', state: '3' },
				{ topic: '14', state: '2' },
				{ topic: '15', state: '3' }
			]
		};
	},
	onLoad() {
		// console.log(this.letterList)
	},
	created() {
		// console.log(this.letterList.length)
	},
	methods: {
		// 题列表点击事件
		onTopic(item, index) {
			console.log(item, index);
			uni.navigateTo({
				url: '../wrongDetails/wrongDetails'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import './numberList.scss';
</style>
